<template>
  <div>
    <div>
      您的最终得分为<span style="font-size: 3em; color: red">{{ score }}</span>
    </div>
    <div class="out-box">
      <div>
        <div class="charts" ref="chart1"></div>
      </div>
      <div>
        <div class="desc">
          您输入的词语序列为
          <span v-for="item in wordList" :key="item" style="color: #c55255; padding: 0 5px; font-size: 1.1em">{{ item
          }}</span>
        </div>
        <div class="charts2" ref="chart2"></div>
      </div>
    </div>
  </div>
</template>


<script>
export default {
  name: "creative-result",
  props: {
    score: { type: Number, default: 70 },
    wordList: { type: Array, default: ["手臂", "橘子", "时钟", "手臂", "橘子", "时钟", "手臂"] },
    scorematrix: { type: Array, default: [] }
  },
  mounted() {
    this.initCharts1();
    this.initCharts2();
  },
  data: function () {
    return {};
  },
  methods: {
    initCharts1() {
      let myChart = this.$echarts.init(this.$refs.chart1);
      var option;
      option = {
        tooltip: {
          formatter: "您的创新指标素质 : {c}%",
        },
        series: [
          {
            name: "您的创新指标素质",
            type: "gauge",
            progress: {
              show: true,
            },
            detail: {
              valueAnimation: true,
              formatter: "{value}",
            },
            data: [
              {
                value: this.score,
              },
            ],
          },
        ],
      };
      option && myChart.setOption(option);
    },
    initCharts2() {
      let myChart = this.$echarts.init(this.$refs.chart2);
      var option;

      // prettier-ignore
      let newList = Array();
      this.wordList.forEach(element => {
        if (element != undefined || element != null || element != '')
          newList.push(element)
      });
      const hours = newList;
      // prettier-ignore
      const days = newList;
      // prettier-ignore
      const data = this.scorematrix
        .map(function (item) {
          return [item[1], item[0], item[2] || '-'];
        });
      option = {
        tooltip: {
          position: "top",
        },
        grid: {
          height: "50%",
          top: "10%",
        },
        xAxis: {
          type: "category",
          data: hours,
          splitArea: {
            show: true,
          },
        },
        yAxis: {
          type: "category",
          data: days,
          splitArea: {
            show: true,
          },
        },
        visualMap: {
          min: 0,
          max: 100,
          calculable: true,
          orient: "horizontal",
          left: "center",
          bottom: "15%",
        },
        series: [
          {
            name: "",
            type: "heatmap",
            data: data,
            label: {
              show: true,
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };

      option && myChart.setOption(option);
    },
  },
};
</script>

<style lang="less" scoped>
.out-box {
  display: flex;
  width: 100%;
  justify-content: center;
}

.charts {
  width: 300px;
  height: 240px;
  margin: 0 auto;
}

.charts2 {
  width: 400px;
  height: 300px;
}
</style>